import React from 'react';
import { Table, Input, Form, TreeSelect } from 'antd';
import styles from './index.less';

const { TreeNode } = TreeSelect;
const { TextArea } = Input;

const initialList = [
    {
        id: 'initial1',
        scoreValue: 1,
        rankCodes: '',
        rankValues: '',
        comment: ''
    },
    {
        id: 'initial2',
        scoreValue: 2,
        rankCodes: '',
        rankValues: '',
        comment: ''
    },
    {
        id: 'initial3',
        scoreValue: 3,
        rankCodes: '',
        rankValues: '',
        comment: ''
    },
    {
        id: 'initial4',
        scoreValue: 4,
        rankCodes: '',
        rankValues: '',
        comment: ''
    },
    {
        id: 'initial5',
        scoreValue: 5,
        rankCodes: '',
        rankValues: '',
        comment: ''
    }
];

const EvaluationItemTable = ({ form, dataSource = [], gradeList = [], onChange, ...restProps }) => {
    const { getFieldDecorator } = form;
    const [selectedList, setSelectedList] = React.useState([]);

    React.useEffect(() => {
        setSelectedList([
            ...new Set([
                ...(form.getFieldValue('score1') || []),
                ...(form.getFieldValue('score2') || []),
                ...(form.getFieldValue('score3') || []),
                ...(form.getFieldValue('score4') || []),
                ...(form.getFieldValue('score5') || [])
            ])
        ]);
    }, [
        JSON.stringify(form.getFieldValue('score1')),
        JSON.stringify(form.getFieldValue('score2')),
        JSON.stringify(form.getFieldValue('score3')),
        JSON.stringify(form.getFieldValue('score4')),
        JSON.stringify(form.getFieldValue('score5'))
    ]);

    const editColumns = [
        {
            title: '分数',
            dataIndex: 'scoreValue',
            width: 60
        },
        {
            title: '对应职级',
            dataIndex: 'rankCodes',
            width: 200,
            render: (text, record) => (
                <Form.Item style={{ margin: 0, width: '100%' }}>
                    {getFieldDecorator(`score${record?.scoreValue}`, {
                        rules: [
                            // {
                            //     required: true,
                            //     message: '请选择对应职级'
                            // }
                            {
                                validator(rule, value, callback) {
                                    const tempComment = form.getFieldValue(`comment${record?.scoreValue}`);
                                    if (value && value.length > 0) {
                                        callback();
                                    }
                                    if (tempComment.trim()) {
                                        callback('请选择对应职级');
                                    }
                                    callback();
                                }
                            }
                        ],
                        initialValue: record?.rankCodes ? record?.rankCodes.split(',') : undefined
                    })(
                        <TreeSelect
                            dropdownClassName={styles.treeSelectDropDown}
                            treeCheckable
                            dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                            placeholder="请选择对应职级"
                            allowClear
                            maxTagCount={1}
                            style={{ width: '100%' }}
                            treeNodeFilterProp="title"
                            getPopupContainer={trigger => trigger.parentElement}
                        >
                            {gradeList.map(item => (
                                <TreeNode
                                    value={item.rankCode}
                                    title={item.rankValue}
                                    key={item.rankCode}
                                    disabled={
                                        selectedList.includes(item.rankCode) &&
                                        !(form.getFieldValue(`score${record?.scoreValue}`) || []).includes(
                                            item.rankCode
                                        )
                                    }
                                />
                            ))}
                        </TreeSelect>
                    )}
                </Form.Item>
            )
        },
        {
            title: '评分说明',
            dataIndex: 'comment',
            render: (text, record) => (
                <Form.Item style={{ margin: 0, width: '100%' }}>
                    {getFieldDecorator(`comment${record?.scoreValue}`, {
                        initialValue: record?.comment || ''
                    })(
                        <TextArea
                            placeholder="请输入评分说明"
                            autoSize={{ minRows: 3, maxRows: 6 }}
                            maxLength={500}
                            style={{ width: '100%' }}
                        />
                    )}
                </Form.Item>
            )
        }
    ];

    const getFinalData = () => {
        const tempList = [...initialList];
        if (dataSource && dataSource.length > 0) {
            dataSource.forEach(item => {
                const i = item.scoreValue;
                tempList.splice(i - 1, 1, item);
            });
        }
        return tempList;
    };

    return (
        <Table
            rowKey="scoreValue"
            bordered={false}
            dataSource={getFinalData()}
            columns={editColumns}
            rowClassName={styles.editableRow}
            pagination={false}
            {...restProps}
        />
    );
};

export default EvaluationItemTable;
